<template>
	<view class="my">
		<!-- 消息提示dom -->
		<u-toast ref="uToast"></u-toast>
		<!-- header部分 -->
		<view class="my_header">
			<view class="header_img">
				<image src="../../static/icons/saoma.png"></image>
				<image src="../../static/icons/setting.png"></image>
			</view>
			<view class="header_nick">
				<view class="nick_avatar">
					<image :src="userInfo.avatar" v-if="isLogin"></image>
					<image src="../../static/icons/avatar.jpg" v-else></image>
				</view>
				<view class="nick_login"  @click="login"  v-if="!isLogin">
					<text class="login-text">点击登录</text>
					<text class="login-msg">登录同步数据，学习更安心</text>
				</view>
				<view class="nick_login" v-else>
					<text class="login-text">{{ userInfo.nickName }}</text>
					<text class="login-msg">编辑资料</text>
				</view>
			</view>
			<view class="header_vip">
				<view class="vip_left">
					<image src="../../static/icons/vip.png"></image>
					<text>VIP会员</text>
				</view>
				<view class="vip_center">
					<view class="center_title1">
						开通小鹿线学习平台
					</view>
					<view class="center_title2">
						VIP会员尽享优质课程
					</view>
				</view>
				<view class="vip_right">
					立即开通
				</view>
			</view>
		</view>
		<!-- 内容部分 -->
		<view class="my_content">
			<view class="content_info">
				<view class="info_item" @click="toCart">
					<view class="info_left">
						<u-icon name="shopping-cart" size="24"></u-icon>
						<text>购物车</text>
					</view>
					<view class="info_right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="info_item">
					<view class="info_left">
						<u-icon name="bag-fill" size="24"></u-icon>
						<text>我的订单</text>
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="info_item">
					<view class="info_left">
						<u-icon name="rmb" size="24"></u-icon>
						<text>我的余额</text>
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="info_item">
					<view class="info_left">
						<u-icon name="coupon-fill" size="24"></u-icon>
						<text>电子兑换码</text>
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="content_aboutUs">
				<view class="info_item">
					<view class="info_left">
						<u-icon name="server-fill" size="24"></u-icon>
						<text>关于我们</text>
					</view>
					<view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view 
			class="content_loginOut" 
			v-if='isLogin'
			@click="loginOut"
			>
				<text>退出登录</text>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入获取用户信息接口函数
	import { getUserInfo,userLoginOut } from '../../api/login'
	import { mapMutations,mapState } from 'vuex'
	
	export default {
		methods:{
			...mapMutations(['setUserInfo','clearUserInfo']),
			// 登录
			login() {
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			// 退出登录
			loginOut() {
				userLoginOut()
				this.clearUserInfo()
				console.log(this.userInfo,this.isLogin)
				this.$refs.uToast.show({
					message:'退出登录成功',
					type:'success'
				})
			},
			toCart() {
				uni.navigateTo({
					url:'/pages/cart/cart'
				})
			}
		},
		onShow() {
			getUserInfo({}).then((res => {
				// 当退出登录后，此时刷新请求会将undefined赋值
				if (!res.data) return
				this.setUserInfo(res.data)
			}))
		},
		computed:{
			...mapState({
				userInfo:state => state.user.userInfo,
				isLogin:state => state.user.isLogin
			})
		}
	}
</script>

<style>
	.my {
		position: absolute;
		overflow: hidden;
		background: rgba(245,245,245,0.39);
	}
	.header_img {
		display: flex;
		flex-direction: row-reverse;
		padding: 28rpx 0;
	}
	.header_img > image {
		width: 48rpx;
		height: 42rpx;
	}
	.header_img image:first-child {
		margin-left: 49rpx;
		margin-right: 39rpx;
	}
	/* 用户相关 */
	.header_nick {
		display: flex;
		align-items: center;
		padding: 0 32rpx;
	}
	.nick_avatar > image{
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
	}
	.nick_login {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 27rpx;
	}
	.login-text {
		font-size: 38rpx;
		font-weight: bold;
		color: #343234;
	}
	.login-msg {
		font-size: 24rpx;
		font-weight: 400;
		color: #919294;
		margin-top: 10rpx;
	}
	/* vip相关样式 */
	.header_vip {
		background: #36364F;
		width: 691rpx;
		height: 240rpx;
		border-radius: 8rpx;
		margin: 35rpx 32rpx;
		display: flex;
		align-items: center;
		color: #fff;
		justify-content: space-around;
	}
	.vip_left {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 20rpx;
		position: relative;
	}
	.vip_left image {
		width: 79rpx;
		height: 57rpx;
		margin-bottom: 7rpx;
	}
	.vip_left::after {
		content: '';
		position: absolute;
		right: -25rpx;
		top:50%;
		margin-top: -29rpx;
		width: 4rpx;
		height: 58rpx;
		background-color: #fff;
	}
	.center_title1 {
		font-size: 24rpx;
		font-weight: 400;
	}
	.center_title2 {
		font-size: 28rpx;
		font-weight: 400;
		margin-top: 4rpx;
	}
	/* 立即开通按钮 */
	.vip_right {
		width: 163rpx;
		height: 58rpx;
		background-image: linear-gradient(to right, #FDF2CE , #FADEA2);
		color: #211f37;
		text-align: center;
		line-height: 58rpx;
		font-size: 28rpx;
		border-radius: 8rpx;
		font-weight: 600;
	}
	/* 功能栏木样式 */
	.my_content {
		margin-top: 9rpx ;
		margin: 0 32rpx;
		border-radius: 12rpx;
	}
	/* 每一行的样式 */
	.info_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 35rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}
	.content_info > view + view {
		border-top: 1rpx solid #ccc;
	}
	.info_left {
		display: flex;
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		align-items: center;
	}
	.info_left > text {
		padding-left: 24rpx;
	}
	/* 关于我们 */
	.content_aboutUs {
		margin-top: 17rpx;
	}
	/* 退出登录 */
	.content_loginOut {
		margin-top: 30rpx;
		padding: 0 32rpx;
		background-color: #fff;
		border-radius: 12rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		color: #333;
		font-size: 29rpx;
	}
</style>